//填写 订单信息中的 收货人信息
Vue.component("flow_address", {
    template: `   <div class="address">
                <h3>收货人信息 <a href="javascript:;" id="address_modify">[修改]</a></h3>
                <div class="address_info">
                    <p>{{firstAddr.shr_name}} {{firstAddr.shr_mobile}} </p>
                    <p>{{firstAddr.shr_address}} </p>
                </div>

                <div class="address_select none">
                    <ul>
                        <li v-for="(addr,k) in  addresss" :class="{cur:k==0}">
                            <input type="radio" name="address" @click.prevent="selectRadio(k)"/>{{addr.shr_name}}
                            {{addr.shr_address}}
                            {{addr.shr_mobile}}
                            <a href="">设为默认地址</a>
                            <a href="">编辑</a>
                            <a href="">删除</a>
                        </li>
                        <li><input type="radio" name="address" class="new_address"/>使用新地址</li>
                    </ul>
                    <form action="" class="none" name="address_form">
                        <ul>
                            <li>
                                <label for=""><span>*</span>收 货 人：</label>
                                <input type="text" name="" class="txt" v-model="formAddr.shr_name"/>
                            </li>
                            <li>
                                <label for=""><span>*</span>所在地区：</label>

                                <select v-model="formAddr.shr_province" name="shr_province">
                                    <option value="">请选择</option>
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="天津">天津</option>
                                    <option value="重庆">重庆</option>
                                    <option value="武汉">武汉</option>
                                </select>

                                <select v-model="formAddr.shr_city" name="shr_city">
                                    <option value="">请选择</option>
                                    <option value="朝阳区">朝阳区</option>
                                    <option value="东城区">东城区</option>
                                    <option value="西城区">西城区</option>
                                    <option value="海淀区">海淀区</option>
                                    <option value="昌平区">昌平区</option>
                                </select>

                                <select v-model="formAddr.shr_county" name="shr_county">
                                    <option value="">请选择</option>
                                    <option value="西二旗">西二旗</option>
                                    <option value="西三旗">西三旗</option>
                                    <option value="三环以内">三环以内</option>
                                </select>
                            </li>
                            <li>
                                <label for=""><span>*</span>详细地址：</label>
                                <input type="text" name="" class="txt address" v-model="formAddr.shr_address" />
                            </li>
                            <li>
                                <label for=""><span>*</span>手机号码：</label>
                                <input type="text" name="" class="txt" v-model="formAddr.shr_mobile"/>
                            </li>
                        </ul>
                    </form>
                    <a href="" @click.prevent="confirm_btn"  class="confirm_btn"><span>保存收货人信息</span></a>
                </div>
            </div>`,
    data() {
        return {
            addresss: [],
            formAddr: {
                shr_name: "",
                shr_mobile: "",
                shr_province: "",
                shr_city: "",
                shr_county: "",
                shr_address: "",
                shr_default: ""
            },
            firstAddr: {},
        }

    },
    updated() {
        //收货人修改
        $("#address_modify").click(function () {
            $(this).hide();
            $(".address_info").hide();
            $(".address_select").show();
        });
        $(".new_address").click(function () {
            $("form[name=address_form]").show();
            $(this).parent().addClass("cur").siblings().removeClass("cur");

        }).parent().siblings().find("input").click(function () {
            $("form[name=address_form]").hide();
            $(this).parent().addClass("cur").siblings().removeClass("cur");
        });
    },
    props: [],
    created() {
        getAddress().then(res => {
            this.addresss = res.data.data
            this.firstAddr = this.addresss[0]
        })
    },
    methods: {
        // 选择 地址
        selectRadio(k) {
            this.firstAddr = this.addresss[k]

            this.winclos()
        },
        // 保存新地址，并且使用
        confirm_btn() {
            console.log(this.formAddr)
            AddAddress(this.formAddr).then(res => {
                this.formAddr.id = res.data.id
                this.firstAddr = this.formAddr
                this.addresss.push(this.formAddr)
                this.winclos()
            })
        },
        winclos() {
            $(".address_info").show();
            $("#address_modify").show();
            $(".address_select").hide();
        }

    }
})

// 填写运单信息中的 配送方式
Vue.component("flow_delivery", {
    template: ` <div class="delivery">
                <h3>送货方式 <a href="javascript:;" id="delivery_modify">[修改]</a></h3>
                <div class="delivery_info">
                    <p>普通快递送货上门</p>
                    <p>送货时间不限</p>
                </div>

                <div class="delivery_select none">
                    <table>
                        <thead>
                        <tr>
                            <th class="col1">送货方式</th>
                            <th class="col2">运费</th>
                            <th class="col3">运费标准</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="cur">
                            <td>
                                <input type="radio" name="delivery" checked="checked"/>普通快递送货上门
                                <select name="" id="">
                                    <option value="">时间不限</option>
                                    <option value="">工作日，周一到周五</option>
                                    <option value="">周六日及公众假期</option>
                                </select>
                            </td>
                            <td>￥10.00</td>
                            <td>每张订单不满499.00元,运费15.00元, 订单4...</td>
                        </tr>
                        <tr>

                            <td><input type="radio" name="delivery"/>特快专递</td>
                            <td>￥40.00</td>
                            <td>每张订单不满499.00元,运费40.00元, 订单4...</td>
                        </tr>
                        <tr>

                            <td><input type="radio" name="delivery"/>加急快递送货上门</td>
                            <td>￥40.00</td>
                            <td>每张订单不满499.00元,运费40.00元, 订单4...</td>
                        </tr>
                        <tr>

                            <td><input type="radio" name="delivery"/>平邮</td>
                            <td>￥10.00</td>
                            <td>每张订单不满499.00元,运费15.00元, 订单4...</td>
                        </tr>
                        </tbody>
                    </table>
                    <a href="" class="confirm_btn"><span>确认送货方式</span></a>
                </div>
            </div>`,
    data() {
        return {}

    },
    updated() {
        //送货方式修改
        $("#delivery_modify").click(function () {
            $(this).hide();
            $(".delivery_info").hide();
            $(".delivery_select").show();
        })

        $("input[name=delivery]").click(function () {
            $(this).parent().parent().addClass("cur").siblings().removeClass("cur");
        });

    },
    props: [],
    created() {

    },
    methods: {}
})

// 填写运单信息中的 支付方式
Vue.component("flow_pay", {
    template: `  <div class="pay">
                <h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
                <div class="pay_info">
                    <p>货到付款</p>
                </div>

                <div class="pay_select none">
                    <table>
                        <tr class="cur">
                            <td class="col1"><input type="radio" name="pay"/>货到付款</td>
                            <td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
                        </tr>
                        <tr>
                            <td class="col1"><input type="radio" name="pay"/>在线支付</td>
                            <td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
                        </tr>
                        <tr>
                            <td class="col1"><input type="radio" name="pay"/>上门自提</td>
                            <td class="col2">自提时付款，支持现金、POS刷卡、支票支付</td>
                        </tr>
                        <tr>
                            <td class="col1"><input type="radio" name="pay"/>邮局汇款</td>
                            <td class="col2">通过快钱平台收款 汇款后1-3个工作日到账</td>
                        </tr>
                    </table>
                    <a href="" class="confirm_btn"><span>确认支付方式</span></a>
                </div>
            </div>`,
    data() {
        return {}

    },
    updated() {

        //支付方式修改
        $("#pay_modify").click(function () {
            $(this).hide();
            $(".pay_info").hide();
            $(".pay_select").show();
        })

        $("input[name=pay]").click(function () {
            $(this).parent().parent().addClass("cur").siblings().removeClass("cur");
        });

    },
    props: [],
    created() {

    },
    methods: {}
})


// 填写运单信息中的 发票信息
Vue.component("flow_receipt", {
    template: `  <div class="receipt">
                <h3>发票信息 <a href="javascript:;" id="receipt_modify">[修改]</a></h3>
                <div class="receipt_info">
                    <p>个人发票</p>
                    <p>内容：明细</p>
                </div>

                <div class="receipt_select none">
                    <form action="">
                        <ul>
                            <li>
                                <label htmlFor="">发票抬头：</label>
                                <input type="radio" name="type" checked="checked" class="personal"/>个人
                                <input type="radio" name="type" class="company"/>单位
                                <input type="text" class="txt company_input" disabled="disabled"/>
                            </li>
                            <li>
                                <label htmlFor="">发票内容：</label>
                                <input type="radio" name="content" checked="checked"/>明细
                                <input type="radio" name="content"/>办公用品
                                <input type="radio" name="content"/>体育休闲
                                <input type="radio" name="content"/>耗材
                            </li>
                        </ul>
                    </form>
                    <a href="" class="confirm_btn"><span>确认发票信息</span></a>
                </div>
            </div>`,
    data() {
        return {}

    },
    updated() {
//发票信息修改
        $("#receipt_modify").click(function () {
            $(this).hide();
            $(".receipt_info").hide();
            $(".receipt_select").show();
        })

        $(".company").click(function () {
            $(".company_input").removeAttr("disabled");
        });

        $(".personal").click(function () {
            $(".company_input").attr("disabled", "disabled");
        });

    },
    props: [],
    created() {

    },
    methods: {}
})











